<template>
 <GlobalCardBox title="申请好友" :showDown="APPLYFRIENDDOWN" :contontStyle="applyFriendBoxStyle">
     <div class="content flex" slot="content"> 
            <input placeholder="填写验证信息" type="text" v-model="content">
            <input placeholder="输入备注" type="text" v-model="remark">
            <el-button @click="ApplyFriend_" round class="button" icon="el-icon-position">发送</el-button>
     </div>
 </GlobalCardBox>
</template>
<script>
import GlobalCardBox from '@/components/Package/GlobalCardBox/GlobalCardBox.vue'
import { mapMutations,mapActions, mapState } from 'vuex'
  export default 
  {
  components: { GlobalCardBox },
     name :'',
     data() {
        return {
            remark:null,
            content:null,
            applyFriendBoxStyle:{
               'width':'500px',
               'height':'auto'
            }
        }
     },
     computed:{
        ...mapState('Login',['User']),
        ...mapState('Personal',['PersonalData'])
     },
     methods:{
        ...mapMutations('Personal',['APPLYFRIENDDOWN']),
        ...mapActions('Chat',['ApplyFriend']),
       async ApplyFriend_(){
          let uid =this.User ? this.User.uid : 0
          let touid=this.PersonalData ? this.PersonalData.uid : -1
          let remark=this.remark==""?null:this.remark
          let content=this.content==""?null:this.content
          let res = await this.ApplyFriend({uid,touid,remark,content})
          if(res.code == 200 ) {
            this.$message.success('申请成功')
            this.APPLYFRIENDDOWN()
          }
          else this.$message.error(res.message)
        }
       } 
  }
</script>
<style scoped lang='less'>
#ApplyFriend{
    width: 500px;
    min-height: 200px;
    max-width: 100vw;
    max-height: 100vh;
    background: var(--GeneralBackColor-half);
    border-radius: 15px;
    overflow: hidden;
}
// 标题
.title{
     width: 100%;
     height: 50px;

     padding: 0 10px;
     box-sizing: border-box;
     justify-content: space-between;

     color: white;
     font-size: 25px;
     font-weight: 600;

     background: var(--GeneralBackColor);

     i{
        font-size: 25px;
        border-radius: 50%;
     }
     i:hover{
        background: rgba(0, 0, 0, 0.5);
     }
}

//内容
.content{
    width: 100%;
    margin: 50px 0;
    padding: 0 50px;
    box-sizing: border-box;

    input{
        width: 100%;
        background: var(--BackColor);
        padding: 10px 5px;
        margin-bottom: 10px;
        font-size: 15px;

    }
   .button{
        color: white;
        font-size: 15px;
        font-weight: 600;

        width: 80%;
        background: var(--GeneralBackColor);
        margin-top: 10px;
    }
}
</style>